<page-header [action]="phActionTpl">
  <ng-template #phActionTpl>
    <button (click)="add()" nz-button nzType="primary">新建</button>
  </ng-template>
</page-header>
<nz-card>
  <nz-table #expandTable [nzData]="listOfMapData" nzTableLayout="fixed">
    <thead>
      <tr>
        <th>ID</th>
        <th>名称</th>
        <th>类型</th>
        <th>路径</th>
        <th>图标</th>
        <th nzWidth="100px">排序</th>
        <th nzWidth="20%">操作</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let data of expandTable.data">
        <ng-container *ngFor="let item of mapOfExpandedData[data.ID]">
          <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
            <td
              [nzIndentSize]="item.level! * 20"
              [nzShowExpand]="!!item.children"
              [(nzExpand)]="item.expand"
              (nzExpandChange)="collapse(mapOfExpandedData[data.ID], item, $event)"
            >
              {{ item.ID }}
            </td>
            <td>{{ item.name }}</td>
            <td>
              <nz-tag [nzColor]="'green'" *ngIf="item.type == 0">组节点</nz-tag>
              <nz-tag [nzColor]="'cyan'" *ngIf="item.type == 1">模块节点</nz-tag>
              <nz-tag [nzColor]="'blue'" *ngIf="item.type == 2">路由节点</nz-tag>
            </td>
            <td>{{ item.link || '-' }}</td>
            <td>{{ item.icon || '-' }}</td>
            <td>{{ item.sort }}</td>
            <td>
              <a (click)="add(item.ID)">
                <i nz-icon nzType="plus" nzTheme="outline"></i>
                <span class="pl-xs ng-star-inserted">添加子菜单</span>
              </a>
              <nz-divider nzType="vertical"></nz-divider>
              <a (click)="edit(item)">
                <i nz-icon nzType="edit" nzTheme="outline"></i>
                <span class="pl-xs ng-star-inserted">编辑</span>
              </a>
              <nz-divider nzType="vertical"></nz-divider>
              <a
                nz-popconfirm
                class="text-error"
                nzPopconfirmTitle="确定删除【{{ item.name }}】?"
                nzPopconfirmPlacement="bottom"
                (nzOnConfirm)="delConfirm(item)"
              >
                <i nz-icon nzType="delete" nzTheme="outline"></i>
                <span class="pl-xs ng-star-inserted">删除</span>
              </a>
            </td>
          </tr>
        </ng-container>
      </ng-container>
    </tbody>
  </nz-table>
</nz-card>
